// MAIN STYLES

// Variables
textShadow = 0 0 6px rgb(22, 22, 22)
textColor = rgb(255, 255, 255)
textFadedColor = rgb(210, 200, 220)
formTextColor = rgb(30, 30, 30)
linkColor = rgb(240, 200, 250)
gridBlockMargin = 5px
gridBlockPadding = 5px
validColor = rgb(60, 240, 60)
invalidColor = rgb(255, 150, 140)
invalidBgColor = rgba(250, 110, 90, 0.45)
contentBgColor = rgb(0, 0, 0)
contentHeadColor = rgb(25, 5, 45)

// Import css libs
@import normalize
@import foundation
@import fontawesome
@import weathericons
@import jsonhuman

// FONTS
// ----------------------------------------------------------------------------

@font-face
    font-family "OpenSans"
    src url("../fonts/OpenSans-Regular-webfont.eot")
    src url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype")
    font-weight normal
    font-style normal
@font-face
    font-family "OpenSansLight"
    src url("../fonts/OpenSans-Light-webfont.eot")
    src url("../fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light-webfont.woff") format("woff"), url("../fonts/OpenSans-Light-webfont.ttf") format("truetype")
    font-weight normal
    font-style normal
@font-face
    font-family "OpenSansBold"
    src url("../fonts/OpenSans-Bold-webfont.eot")
    src url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype")
    font-weight normal
    font-style normal

// MAIN LAYOUT
// ----------------------------------------------------------------------------
html
    overflow-x hidden

// Body main styles
body
    background rgb(40, 40, 40)
    background-size cover
    font-family OpenSansLight, sans-serif
    overflow-x hidden

// Special font for headers
h1, h2, h3, h4, h5, h6, nav
    font-family OpenSans, sans-serif

// Sticky on top of the bg
div.fixed
    position fixed
    z-index 9

// Top bar force height
.top-wrapper
    height 45px

// Top bar force bg color
.top-bar
    background-color rgba(44, 44, 44, 0.95) !important
.top-bar-section ul li, .top-bar li a, .top-bar.expanded .title-area, .top-bar.expanded .toggle-topbar a
    background-color transparent !important
.top-bar-section
    background rgba(44, 44, 44, 0.95) !important
    width 100%
.top-bar-section li.active a
    color linkColor !important

// Top bar title
h2
    color linkColor !important
    font-size 1.0625rem
    position fixed
    left 60px
    top 8px
    z-index 999
.top-bar.expanded h2
    opacity 0.3

// Sub headers
h3
    margin-bottom 0.75rem
    text-shadow 0 0 6px rgb(0, 0, 0)

// Force transparent and border-less tables
table, table tr
    background transparent !important
table, table thead, table tbody
    border 0 !important

// Main wrapper
#wrapper
    margin auto
    position relative

// Page contents
.page
    color textColor
    margin 13px
    position relative
    z-index 2

// FORMS
// ----------------------------------------------------------------------------

// Forms
textarea
    color formTextColor

// SPECIAL STYLES
// ----------------------------------------------------------------------------

// Green and red colours
span.valid, label.valid
    color validColor
span.invalid, label.invalid
    color invalidColor

// Invalid H5 with red background
h5.invalid
    background-color invalidBgColor !important

// Text shadow for text-on-backgrounds
.shadow
    text-shadow textShadow

// Clip contents
.clip
    overflow hidden
    text-overflow ellipsis

// Datestamp on panels
.panel .timestamp
    color textFadedColor
    font-size 0.8rem

// Right spaced span
span.spaced
    margin-right 10px

// ANNOUNCEMENTS
// ----------------------------------------------------------------------------

#announcements
    background-color rgba(60, 60, 60, 0.9)
    background-size 100% 100%
    bottom 0
    color rgb(255, 255, 255)
    left 0
    height 28px
    margin 0
    padding 0
    position fixed
    width 100%

    div
        font-size 90%
        padding 2px 0 0 8px

#announcements.error
    background rgba(240, 65, 36, 0.9)

#announcements.ok
    background rgba(67, 172, 106, 0.9)


// OVERWRITE FOUNDATION STYLES
// ----------------------------------------------------------------------------

// Headers
h3
    margin-bottom 0.75rem

// Sticky on top of the bg
.fixed
    position fixed
    z-index 9

// Top bar icons
.top-bar a i
    color transparent
    width 22px
    @media only screen and (min-width: 40.063em)
        width auto !important
.top-bar a:hover i
    color textColor

// Top bar force bg color
.top-bar
    background-color rgb(0, 0, 0) !important
.top-bar-section ul li, .top-bar li a, .top-bar.expanded .title-area, .top-bar.expanded .toggle-topbar a
    background-color transparent !important
.top-bar-section
    background rgb(0, 0, 0) !important
    width 100%
.top-bar-section li.active a, .top-bar-section li.active a i
    color linkColor !important

// Make panels translucent
.panel
    background-color contentBgColor !important
    border 0 !important
    color textColor
    margin-bottom 0
    padding 0 !important
    text-shadow none

    // Force colors
    table th, table td, h1, h2, h3, h4, h5, h5 a, h6, li
        color textColor

    table thead tr th, table thead tr td
        padding-bottom 0.5rem

    table
        width 100%
    thead
        background contentBgColor !important
    h4
        background contentHeadColor !important
        color textColor
        display block
        font-size 1.1rem
        font-weight bold
        margin 0
        padding 0.625rem

    .inner
        padding 10px !important

.panel.inner
    padding 10px !important
